<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!-- 头部模块 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="./img/小标.png">
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程详情</a></li>
                <li><a href="#">讲解视频</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户 -->
        <div class="user">
            <a href=""><img src="">注册|登录</a>
        </div>       
    </div>
	<div class="main" id="main">
		<div class="menu-box">
		</div>
		<!--内容-->
		<div class="sub-menu hide" id="sub-menu">
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">HTML、HTML5</div>
					<div class="sub-row">
						<span class="bold mr10">HTML：</span>
						<a href="https://www.runoob.com/html/html-intro.html">HTML简介</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-tutorial.html">HTML教程</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-editors.html">HTML编辑器</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10"></span>
						<a href="https://www.runoob.com/html/html-basic.html">HTML基础</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-elements.html">HTML元素</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-elements.html">HTML属性</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-formatting.html">HTML文本格式化</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html-tables.html">HTML表格</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">HTML5：</span>
						<a href="https://www.runoob.com/html/html5-intro.html">HTML5教程</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html5-new-element.html">HTML5新元素</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html5-canvas.html">HTML5 Canvas</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10"></span>
						<a href="https://www.runoob.com/html/html5-draganddrop.html">HTML5拖放（Drag 和 Drop）</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html5-video.html">HTML5 Video(视频)</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html5-audio.html">HTML5 Audio(音频)</a>
						<span class="ml10 mr10">/</span>
						<a href="https://www.runoob.com/html/html5-form-elements.html">HTML5表单元素</a>
					</div>
					
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">JavaWeb 动态网站开发</div>
					<div class="sub-row">
                       <span class="bold mr10">动态网页语言：</span>
                       <a href="https://baike.baidu.com/item/%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5%E6%8A%80%E6%9C%AF/9415956?fr=ge_ala">ASP</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://baike.baidu.com/item/%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5%E6%8A%80%E6%9C%AF/9415956?fr=ge_ala">JSP</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://baike.baidu.com/item/%E5%8A%A8%E6%80%81%E7%BD%91%E9%A1%B5%E6%8A%80%E6%9C%AF/9415956?fr=ge_ala">PHP</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">JavaScript</div>
					<div class="sub-row">
                       <span class="bold mr10"></span>
                       <a href="https://www.runoob.com/js/js-tutorial.html">js教程</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-intro.html">js简介</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-howto.html">js用法</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-vscode.html">js VScode</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10"></span>
                       <a href="https://www.runoob.com/js/js-statements.html">js语句</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-variables.html">js变量</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-datatypes.html">js数据类型</a>
                       <span class="ml10 mr10">/</span>
                       <a href="https://www.runoob.com/js/js-functions.html">js函数</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">...</a>
					</div>
					
					
				</div>
			</div>
		</div>
		<!-- 菜单 -->
		<div class="menu-content" id="menu-content">
			<div class="menu-item">
				<a href="">
					<span>HTML、HTML5</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>Javaweb 动态网页开发</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>JavaScript</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			
		</div>

        <!-- 轮播图 -->
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		<a href="javascript:void(0)" class="button prev" id="prev"></a>
		<a href="javascript:void(0)" class="button next" id="next"></a>
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
	</div>

    <!-- 轮播图下词条部分 -->
	<div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">C语言</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Python</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- box核心区域 -->
    <!-- 精品推荐模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li><img src="./img/1 (1).jpeg">
                    <div class="hot">
                        <img src="./img/2 (1).png">
                    </div>
                    <p>移动web设计与小程序开发</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/4 (1).png">
                    <div class="hot">
                        <img src="./img/2 (1).png">
                    </div>
                    <p>软件测试技术</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/1 (3).jpg">
                    <p>程序设计基础</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/1 (1).png">
                    <p>数据库高级应用</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/1 (3).jpg">
                    <p>后端技术与项目开发</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/1 (2).png">
                    <div class="hot">
                        <img src="./img/2 (1).png">
                    </div>
                    <p>网页设计技术</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/1 (3).jpg">
                    <div class="hot">
                        <img src="./img/2 (2).png">
                    </div>
                    <p>前后端分离项目实战</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/5 (2).jpeg">
                    <p>专业技能综合实践</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/4 (1).png">
                    <p>前端框架应用项目开发</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="./img/4 (3).jpg">
                    <p>web前端开发技术</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 编程入门模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>编程入门</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            
            <div class="plogo">
                <img src="./img/222.gif">
            </div>
            <ul>
                <li class="pli"><img src="./img/1 (1).jpeg">
                    <p>C语言</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li class="pli"><img src="./img/5 (6).jpeg">
                    <p>网页设计</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                
                <li class="pli"><img src="./img/5 (3).jpeg">
                    <p>Python入门</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li class="pli"><img src="./img/5 (2).jpeg">
                    <p>JavaScript</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 数据分析师模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>数据分析师</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">           
            <div class="plogo">
                <img src="./img/111.gif">
            </div>
            <ul>
                <li class="pli"><img src="./img/5 (2).jpeg">
                    <p>数据可视化</p>
                    <div class="info2">
                        <span>初级</span>  •  1125人在学习
                    </div>
                </li> 
                <li class="pli"><img src="./img/4 (3).jpg">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>   
                <li class="pli"><img src="./img/5 (3).jpeg">
                    <p>MySQL 必知必会</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>            
                <li class="pli"><img src="./img/1 (1).jpeg">
                    <p>数据分析工具</p>
                    <div class="info2">
                        <span>中级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 前段模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>前端工程师</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li><img src="./img/5 (6).jpeg">
                    <p>网页布局+移动web</p>
                    <div class="info">
                        <span>初级</span>  •  125人在学习
                    </div>
                </li>
                <li><img src="./img/5 (5).jpeg">
                    <p>vue开发+小程序</p>
                    <div class="info">
                        <span>高级</span>  •  11250人在学习
                    </div>
                </li>
                <li><img src="./img/5 (6).jpeg">
                    <p>JavaScript</p>
                    <div class="info2">
                        <span>中级</span>  •  178人在学习
                    </div>
                </li>
                <li><img src="./img/1 (3).jpg">
                    <p>移动客户端</p>
                    <div class="info2">
                        <span>高级</span>  •  5639人在学习
                    </div>
                </li>
                <li><img src="./img/5 (3).jpeg">
                    <p>web服务器基础</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer模块 -->
    <div class="footer">
        <div class="box w">
            <div class="left">
                <img src="./img/logo.png">
                <p>崩崩学习网致力于为广大学生提供更多学习资源，光学不累。<br>
                    © 别卷奥</p>
                <a href="#">我们の小屋</a>
            </div>
            <div class="right">
                <dl>
                    <dt>关于崩崩网</li>
                    <dd><a href="#">关于我们</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">客服</a></dd>
                    <dd><a href="#">客户反馈</a></dd>
                    <dd><a href="#">帮助中心</a></dd>
                </ul>
            </div>
            <div class="right">
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何在大学生存</a></dd>
                    <dd><a href="#">如何做美梦拿满分</a></dd>
                    <dd><a href="#">洗洗睡吧</a></dd>
                </dl>
            </div>
            <div class="right">
                <dl>
                    <dt>加入我们</dt>
                    <dd><a href="#">加QQ群</a></dd>
                    <dd><a href="#">扫微信群</a></dd>
                </dl>
            </div>
        </div>
    </div>
	<script src="js/script.js"></script>
</body>
</html>